<template>
	<view class="point-shop-view">
		
		空白页
	<!-- 	<view class="content-gradient-bac"></view>
		<up-navbar title="积分商城" @leftClick="leftClick" :autoBack="false" :bgColor='bgColor'></up-navbar> 
		<view :style="'height:' + navbarHeight + 'rpx' "></view>   
		<view class="h-40"></view>
		<view class="chxy-row-bt h-120" style="z-index: 2;position: relative;">
			<view class="chxy-row">
				<view class="m-0-24"> 
					<up-image v-if="userModal.attachment" :src="userModal.attachment" width="120rpx" height="120rpx" shape="circle" :lazy-load="true"></up-image>
					<up-image v-else src="https://oss.jtmckj.com/wmp/images/common/i_default_avatar.png" width="120rpx" height="120rpx" shape="circle" :lazy-load="true"></up-image>
				</view>
				<view class="wx-view">
					<view class="wx-name">{{userModal.name ||'暂无'}}</view>
					<view v-if="userModal.isPayCard === '1'" class="wx-vip">权益会员</view>
				</view>
			</view>
			<view class="jf-rules chxy-row-c-c" @click="showPop = true">
				<view>积分规则</view>
				<up-icon name="arrow-right" color="#141414" size="16"></up-icon>
			</view>
		</view>
		<view class="h-40"></view>
		<view class="chxy-row-arr jf-view" style="z-index: 2;position: relative;">
			<view class="jf-item" @click="toScore">
				<view class="jf-name">积分</view>
				<view class="jf-spc"></view>
				<view class="jf-code">{{userModal.currentPoint || 0 }}</view>
			</view>
			<view class="spc-line"></view>
			<view class="jf-item" @click="toOrder">
				<view class="jf-name">我的订单</view>
				<view class="jf-spc"></view>
				<view class="jf-jl chxy-row-c-c">
					<view style="margin-left: 4rpx;">兑换记录</view>
					<up-icon name="arrow-right" color="#999" size="12" top="1"></up-icon>
				</view>
			</view>
			<view class="spc-line"></view>
			<view class="jf-item" @click="daySign">
				<view class="jf-name">每日签到</view>
				<view class="jf-spc"></view>
				<view class="jf-jl chxy-row">
					去签到
					<up-icon name="arrow-right" color="#999" size="12" top="1"></up-icon>
				</view>
			</view>
		</view>
		
		<view class="h-40"> </view> 
		
 
		<view style="padding: 0 10rpx;background-color: #F2F2F2;z-index: 2;position: relative;">
			<up-tabs :list="typeList" @change="tabsChange" lineHeight="2" :current="tabsCurrent" 
			    lineColor="#FF6A00" :inactiveStyle="{ color: '#666666',  transform: 'scale(1.07)' }"
				:activeStyle="{ color: '#FF6A00', transform: 'scale(1.10)' }"></up-tabs>
		</view>

		 
		<view class="card-view"> 
			<mescroll-body @init="mescrollInit"  @up="upCallback" :down="{isLock: true}"  @down="downCallback">
			<up-grid :border="false" col="2"> 
				<up-grid-item @click="gridupItemClick(item)" v-for="(item,index) in goodsList" :key="index" :customStyle="{width:342+'rpx',height:500+'rpx',marginRight:18 +'rpx',marginBottom:20 +'rpx',background:'#fff',borderRadius:'20rpx'}">
					<image v-if="item.attachment" :src="item.attachment" class="radio-t" mode="scaleToFill"></image>
					<image v-else src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/goods/goods_defau.png" class="radio-t"></image>
					<view class="grid-card">
						<view class="item-title">{{item.name}}</view>
						<view class="item-sub-title">{{item.remark}}</view> 
						<view class="item-money"></view>
						<view class="item-jf chxy-row-bt">
							<view class="jf-left chxy-row-ac">
								<view class="">{{item.exchangeScore}}</view>
								<view class="color-666">积分</view>
							</view>
							<view class="jf-but">兑换</view>
						</view>
					</view>
				</up-grid-item> 
			</up-grid>
			</mescroll-body>
			
			<mescroll-empty v-if="goodsList.length==0"></mescroll-empty>
		</view>

 
		<up-overlay :show="showPop">
			<view class="chxy-row-c-c" style="height: 100%;width: 100vw;">
				<view class="over-rules">
					<image @click.stop="showPop = false"
						src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/jfsc/home/close.svg"
						style="width: 36rpx;height: 36rpx;position: absolute;right:32rpx ;top: 32rpx;"></image>
					<view class="over-rules-title">积分规则</view>
					<view @tap.stop class="over-rules-desc">
						积分（以下简称“积分”）为回馈用户的权益奖励，积分不具有货币或现金价值，不可兑现，不可转让。用户可以通过支付、签到、积分奖励活动等方式来获取积分，积分可以在积分商城处兑换各类权益、参与各种积分活动等，具体以权益兑换及活动页面展示为准。
					</view>
				</view>
			</view>
		</up-overlay>
		
		<up-popup :show="showSign" mode="center" @close="closeSign" :round="10">
			<view style="width: 500rpx;background: #FFFFFF; border-radius: 16rpx;padding:0 50rpx 40rpx 50rpx ;"> 
				<view style="text-align: center;font-size: 28rpx;color: #212121;margin-top: 40rpx;">
					<text>请前往</text>
					<text style="color: #ff6a00;">富德快点餐</text>
					<text>小程序"我的"-"签到"</text> 
				</view> 
				<view class="chxy-row-c-c" style="margin-top: 60rpx;"> 
					<view class="close-btn-new" @click="showSign = false">知道了</view>
				</view>
			</view>
		</up-popup> -->

	</view>
</template>

<script setup> 
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"; 
	import { onLoad, onReachBottom, onPullDownRefresh, onShow, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref, reactive, nextTick } from 'vue';
	import { goodsPublic } from '@/pagesPointShop/api/goods.js';   
	import { initStatusBarHeight } from "@/until/tools.js" 
	import { useUserStore } from '@/store/user.js';
	
	const store = useUserStore();  
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
	const navbarHeight = computed(() => { 
		return initStatusBarHeight() || 200;
	});  
	const orgCode = ref();
	const userCode = ref(); 
	const tabsCurrent = ref(0);  
	const userModal = ref({
		'name': '',
		'isPayCard': '',
		"currentPoint":0
	}); 
	const typeList = ref([]);
	const goodsList = ref([]);
	const goodsTotal = ref(0); 
	const showPop = ref(false);
	const bgColor = ref('transparent');
	const showSign = ref(false);
	// 其他小程序页面传参过来 orgCode userCode保证唯一性
	onLoad(() => {    
		orgCode.value = store.pipelineInfo.orgCode    // 当前门店编号
		userCode.value = store.pipelineInfo.userCode  // 查询用户信息
	}); 
	
	onShow(() => { 
		initData()
	});   
	
	// 每次都需要刷新
	const initData = () => { 
		initUserInfo() 
		initType()
	}  
	
	// 初始化 赋值用户头像昵称
	const initUserInfo = () => { 
		let modal = {
			"functionName": "getMemberInfo",
			"contentData": {
				"memberCode": userCode.value
			},
			"orgCode": orgCode.value
		}
		goodsPublic(modal).then(res => { 
			if (res.opFlag !== '1') { return }
			let result = res.content.rowData       
			userModal.value = result.find(item => item.cardType === 2)  // 类型2 门店卡（当前只做门店卡不做品牌卡）   
			store.SetUserInfo(userModal.value || '')   // 存储用户基础信息 
		})
	};
	
	// 初始化 商品类型 
	const initType = async () => { 
		let modal = {
			"functionName": "getMallGoodsType",
			"orgCode": orgCode.value,
			"contentData": ""
		} 
		const { opFlag, content } = await goodsPublic(modal) // 常规返参字段 const { code, data } = await goodsPublic(modal) 
		if (opFlag !== '1') {
			return
		} 
		let result = { 'code':'', "name":'全部' }
		typeList.value = [ result, ...content.rowData]
	}; 
	
	const tabsChange = (item) => {   
		tabsCurrent.value = item.index
		getMescroll().resetUpScroll()
	}  
	
	// 初始化 商品列表
	const upCallback = (mescroll) => { 
		// console.log('upCallback',mescroll)
		let type = typeList.value[tabsCurrent.value]?.code || ''
		// console.log('typeList',type)
		let modal = {
			"functionName": "getMallGoodsInfo",
			"orgCode": orgCode.value,
			"contentData": {
				"typeCode": type,
				"pageSize": mescroll.size,
				"pageIndex": mescroll.num
			}
		}
		goodsPublic(modal).then(res => {
			// console.log('getGoods', res) 
			if (res.opFlag !== '1') {
				mescroll.endErr();
				return
			} 
			goodsTotal.value = res.content.count // 总数据量
			const curPageData = res.content.rowData || [] 
			if (mescroll.num == 1) goodsList.value = [];  
			goodsList.value = goodsList.value.concat(curPageData); 
			// mescroll.endBySize(curPageData.length, goodsTotal.value); // 请求成功, 结束加载
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		}).catch(()=>{
			mescroll.endErr();
	    })
	}  
	
	onPageScroll(e => {
		// console.log('e.scrollTop  ', e.scrollTop)
		if (e.scrollTop < 20) {
			bgColor.value = 'transparent'
		} else {
			bgColor.value = '#f9e4d4'
		}
	});
	
	const toOrder = () => {
		uni.navigateTo({
			url: '/pagesPointShop/view/order/orderList'
		})
	};
	
	const toScore = () => {
		uni.navigateTo({
			url: '/pagesPointShop/view/score/scoreHistory'
		})
	};   
	
	// 跳转 商品详细信息
	const gridupItemClick = (item) => {
		console.log('click', item); 
		uni.navigateTo({
			url: './exchange/details?goodId=' + item.code 
		})
	}; 
	
	// 上拉加载更多
	// onReachBottom(() => { // loadMore(); console.log('onReachBottom...') });
	
	// //下拉刷新
	onPullDownRefresh(() => {
		console.log('onPullDownRefresh...')
		uni.showNavigationBarLoading();
		nextTick(()=>{
			initData()
			getMescroll().resetUpScroll() 
			// uni.hideNavigationBarLoading();
			// uni.stopPullDownRefresh()
		}) 
		setTimeout(function () {
		  uni.stopPullDownRefresh();
		}, 500);
	}); 
	
	const daySign = () => {
		// console.log('daySignClick');
		// let modal = {
		// 	id:'123测试-暂时不需要传参'
		// } 
		// wx.navigateToMiniProgram({
		//     appId: 'wxd86a4a7087a1ed03',
		//     path: '/pages/home/signin/signin',
		//     extraData: modal,
		//     envVersion: 'develop', //develop开发版  trial体验版  release正式版 
		//     success(res) {
		//         // 打开成功
		//     }
		// })
		 
		// wx.navigateBackMiniProgram({
		//   extraData: {
		//     // 传递给当前小程序的数据，可选
		//   },
		//   success(res) {
		//     // 返回成功的回调函数
		//   },
		//   fail(res) {
		//     // 返回失败的回调函数
		//   }
		// })
		
		showSign.value = true
	};  
	
	const toCreatPrder = () => {
		showSign.value = false
	}
	
	const closeSign = () => {
		showSign.value = false
	}
	
	const leftClick = () => {
		console.log('leftClick');
		// let modal = {
		// 	id:'123测试-暂时不需要传参'
		// } 
		// wx.navigateToMiniProgram({
		//     appId: 'wxd86a4a7087a1ed03',
		//     path: '/pages/home/index/index',
		//     extraData: modal,
		//     envVersion: 'develop', //develop开发版  trial体验版  release正式版 
		//     success(res) {
		//         // 打开成功
		//     }
		// }) 
		
		wx.navigateBackMiniProgram({
		  extraData: {
		    // 传递给当前小程序的数据，可选
		  },
		  success(res) {
		    // 返回成功的回调函数
		  },
		  fail(res) {
		    // 返回失败的回调函数
		  }
		})
	};
	
</script>

<style scoped lang="scss">
	
	:root{
		--bac-color: #F2F2F2;
		--bac-pri-color: #FF6A00;
		--bac-sec-color: #FF5500;
	}
	
	.point-shop-view {
		position: relative; 
		width: 100vw; 
		background-color: #F2F2F2;
	}

	.content-gradient-bac {
		position: absolute;
		background: linear-gradient(0deg, #F2F2F2, #FFE9D9);
		width: 100vw;
		height: 580rpx;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.h-top-fix {
		height: 180rpx;
		width: 100vw;
	}

	.card-view {
		padding: 24rpx 6rpx 24rpx 24rpx;
		background-color: #F2F2F2;
	}

	.color-666 {
		color: #666666;
	}

	.wx-view {
		.wx-name {
			margin-top: 16rpx;
			margin-bottom: 18rpx;
			height: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #212121;
			line-height: 30rpx;
		}

		.wx-vip {
			width: 144rpx;
			height: 48rpx;
			background: linear-gradient(-75deg, #FF5500, #FFBF00);
			border-radius: 24rpx;
			/* width: 93rpx; */
			/* height: 23rpx; */
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFDE5;
			line-height: 48rpx;
			text-align: center;
		}
	}

	.jf-rules {
		width: 188rpx;
		height: 58rpx;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		border: 1rpx solid #212121;  
		border-right: none;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
		line-height: 58rpx;
	}

	.jf-view {
		height: 120rpx;
		background-color: #FFFFFF;
		width: 702rpx;
		margin: 0 24rpx;
		border-radius: 16rpx;

		.jf-item {
			width: 190rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.jf-name {
				/* width: 54rpx; */
				/* height: 27rpx; */
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx !important;
				color: #212121;
				/* line-height: 48rpx; */
			}

			.jf-spc {
				height: 10rpx;
			}

			.jf-code {
				width: 81rpx;
				/* height: 21rpx; */
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FF3333;
				text-align: center;
				/* line-height: 48rpx; */
			}

			.jf-jl {
				/* width: 94rpx; */
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-right: 4rpx; 
				/* background-color: aquamarine; */
				/* line-height: 48rpx; */
			}
		}

		.spc-line {
			width: 2rpx;
			height: 48rpx;
			background: #E6E6E6;
		}
	}

	.grid-card {
		height: 188rpx;
		width: calc(100% - 32rpx);
		margin: 0 16rpx;
	}

	.over-rules {
		position: relative;
		width: 505rpx;
		height: 484rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 60rpx 48rpx 40rpx 48rpx;

		.over-rules-title {
			text-align: center;
			height: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #212121;
			line-height: 30rpx;
			margin-bottom: 47rpx;
		}

		.over-rules-desc {
			width: 505rpx;
			height: 384rpx;
			/* overflow-y: scroll; */
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
		}
	}

	.item-title {
		width: 100%;
		height: 31rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #212121;
		line-height: 30rpx;
		margin: 15rpx 0 11rpx 0;
	}

	.item-sub-title {
		width: 100%; // width: 210rpx;  
		height: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		line-height: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.item-money { 
		height: 20rpx; 
		font-family: PingFang SC;
		// margin-top: 15rpx;
		// height: 30rpx;
		// line-height: 30rpx;
		font-size: 24rpx;
		color: #FF3333;
	}

	.item-jf { 
		margin-top: 8rpx;
		font-size: 24rpx; 
		color: #FF6A00;
	}

	.radio-t {
		width: 342rpx;
		height: 342rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.jf-but{
		text-align: center;width: 80rpx;height: 40rpx;background: #FF6A00;border-radius: 8rpx;font-family: PingFang SC;font-weight: 500;font-size: 24rpx;color: #FFFFFF;line-height: 40rpx;
	}
	
	.submit-btn {
		width: 240rpx;
		height: 80rpx;
		background: #FF6A00;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #fff;
	}
	
	.close-btn {
		width: 236rpx;
		height: 76rpx;
		border-radius: 40rpx;
		border: 2rpx solid #999999;
		text-align: center;
		line-height: 80rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #999999;
	}
	
	.close-btn-new{
		width: 200rpx;
		height: 60rpx;
		border-radius: 40rpx;
		border: 2rpx solid #999999;
		text-align: center;
		line-height: 60rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}
</style>